// pages/profile/index.ts
Page({
  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {
      avatar: '',
      nickName: '',
    },
  },

  onChooseAvatar(e) {
    console.log(e.detail.avatarUrl)

    // 这个是用 wx.utils.http 上传的吗？不是
    // 那么会有 baseURL 吗？ 没有
    // 所以，url 需要写完整的地址
    // 也不会经过请求拦截器 自动注入 token，所以要手动添加
    wx.uploadFile({
      url: 'https://live-api.itheima.net/upload', // 自己的后台上传图片接口的地址
      name: 'file', // 自己的后台 接收文件 数据 的 参数名称
      filePath: e.detail.avatarUrl, // 要上传的文件地址
      // 额外的请求参数
      formData: {
        type: 'avatar',
      },
      header: {
        Authorization: getApp().globalData.token,
      },
      success: (res) => {
        console.log(res, 'res')

        const { code, data } = JSON.parse(res.data)
        if (code !== 10000) return wx.utils.toast()
        this.setData({
          'userInfo.avatar': data.url,
        })

        // 没有再去保存用户信息了
        // 流程：button ==> bindchoooseavatar ==> 临时头像地址 ==> wx.uploadFile ==> 永久在线头像地址 ==> 设置到 data 中 ==> 绑定到模板上 ==> 渲染完成
      },
    })
  },

  async saveNickName() {
    // 根据自定义 class 获取 van-field 组件实例
    this.selectComponent('.van-field-nickname')
      // 创建查询筛选器（筛选范围仅在该组件内部）
      .createSelectorQuery()
      // 查找内部的元素（van-field 组件内部的 input 有一个固定的 class 叫 input-class）
      .select('.input-class')
      // 提取 input 的 value 属性
      .fields(
        {
          properties: ['value'],
        },
        async (res) => {
          // 根据回调函数的形参 res.value 接收输入框中当前最新的值（昵称）
          const nickName = res.value.trim()
          // 然后再走后续的更新昵称的逻辑代码
          if (!nickName) return wx.utils.toast('请输入昵称~')
          const { code } = await wx.http.put('/userInfo', {
            nickName,
          })
          if (code !== 10000) return wx.utils.toast()
          wx.utils.toastSucc('昵称更新成功~')
        }
      )
      // 执行查询动作，必须调用，不然不会执行
      .exec()

    // setTimeout(() => {
    //   const vanFiled = this.selectComponent('.hehe')
    //   console.log(vanFiled, 'vanFiled')
    //   const input = vanFiled.selectAllComponents('input')
    //   console.log(input, 'input')
    // }, 1000)
    // console.log(e)
    // const nickName = e.detail.value.trim()
    // if (!nickName) return wx.utils.toast('请输入昵称~')
    // const { code } = await wx.http.put('/userInfo', {
    //   nickName,
    // })
    // if (code !== 10000) return wx.utils.toast()
    // wx.utils.toastSucc('昵称更新成功~')
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad() {
    const { code, data } = await wx.http.get('/userInfo')

    if (code !== 10000) return wx.utils.toast()

    this.setData({
      // userInfo: {
      //   avatar: data.avatar,
      //   nickName: data.nickName,
      // },
      userInfo: wx.utils.pick(data, ['avatar', 'nickName']),
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {},
})
